<template>
    <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="查询时间">
            <a-range-picker @change="selectedDate"/>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" html-type="submit" @click="handleSubmit">
                查询
            </a-button>

            <a-button @click="refresh" :disabled="this.dates === []" style="margin-left: 10px">
                刷新
            </a-button>
        </a-form-item>
    </a-form>
</template>

<script>
    import {mapActions, mapGetters} from "vuex";

    export default {
        props:['id'],
        components: {
        },
        computed: {
            ...mapGetters([
                // 'activeRoomId'
            ])
        }
        ,
        data() {
            return {
                form: this.$form.createForm(this, { name: 'room_manage_form' }),
                dates: []
            }
        },
        methods: {
            ...mapActions([
                'submitRoomRepoSearch'
            ]),
            refresh(e) {
                this.handleSubmit(e)
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err && this.dates[0] !== undefined && this.dates[1] !== undefined) {
                        const data = {
                            fromDate: this.dates[0],
                            toDate: this.dates[1],
                            roomId: this.id,
                        }
                        this.submitRoomRepoSearch(data);
                    }
                });
            },
            selectedDate(date, dateString) {
                console.log(dateString)
                this.dates = dateString;
            },
        },
    };
</script>